<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Css基础</title>
    <link href="《11》css基础.css" rel="stylesheet" type="text/css">

    <style>
        body {
            background-color:yellow;
        }
    </style>
</head>
<body style="background-color: #ff0000;">
     <h1>Hello World</h1>

</body>
</html>

<!--
(了解)css介绍：cascading stylesheet，级联/层叠样式表，专门控制html网页元素的外观样式，包括大小、颜色、布局等方面。

语法：选择器 {css表达式}。大括号表示语句块，css表达式；号结尾。
内部样式：style标签 ，一般写在head标签下。
行内样式：标签内写一个style属性，属性值写css语句。优点是测试书写方便，缺点是写多之后页面耦合度高，可读性差，不好维护。
外部样式：先写一个.css文件，然后再html页面中引用。link标签引用，rel属性relation。优点，耦合度低，易于维护。

样式优先级：从高到低。行内样式 > 内部样式 > 外部引用
场景：行内样式和内部样式适合css代码少，html简单的情况；外部样式适合css语句多，大型项目。


CDN:Content Delivery Network,即内容分发网络，之前我们写的css都是引用本地，以后使用别人的css代码时，一种方式是复制别人的代码到自己的项目，但更简便的方式是请求别人的服务器随网页在线下和加载。但在线请求网站服务器css js资源仍有问题，服务器压力比较大，离得远的服务器传输速度慢。CDN应运而生，原理是服务器上比较常用的css js资源缓存到全国各个cdm服务器节点，当某个人访问网站时，会从最近的cdn节点获取数据。
（了解）图片格式：png无损图片，画质好但大，支持同名。jpg，有损压缩，体积大大减少画质轻度损耗。gif更好的压缩格式。支持动图多帧。
（了解）字体图标：原来网页中的图标都是先用ps之类的工具做好jpg、phg格式图片再插入网页中。而现在一些网页图标的源代码是用i标签（字体）插入的。电脑中的字体，例如微软雅黑，是实现定义好，由数学算法绘制出来的矢量图形。所以人们用做矢量图标的方式做了一套图标，在网页中i标签插入 定义class对应不同图标代码。字体图标的好处是体积小，放大缩小不失真。
SVG：矢量图标，有html代码定义，除了体积小，放大缩小不失真的优点，功能比字体图标更加复杂，可以复杂图表，缺点是学习阅览不方便。
-->